<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <!-- 以对象的方式绑定style属性
    属性名对应样式名；属性值对应样式值，一般给变量 -->
    <div id="ap">
        <!-- 行内属性的结构 -->
    <div style="color:red ; font-size:48px;">我是div</div>

    <!-- 把行内属性改造称对象，以对象方式绑定style属性 -->
    <!-- 外部增加{}；属性值改造成字符串；分号改造成逗号；属性名到对象名的改变 -->
    <div :style=" {color:'red' , fontSize:'48px'}">我是div</div>

    <!-- 把属性值改成遍量 -->
    <!-- 第一个color是样式名，第二个color是变量名，和data中的变量保持一致-->
    <div :style=" {color:aa , fontSize:px}">我是div</div>

  </div>
<script>
    new Vue({
        el:"#ap",
        data:{
            aa:'orange',
            px:'12px'
                }
    })
</script>
</body>
</html>